<template>
  <div class="bgc-default pad-20">
    <div class="bg-color-white pad-20">
      <div class="bgc-default" style="padding-top: 22px">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="88px"
          class="search-item">
          <el-form-item label="搜索门店:" prop="searchKeyWord">
            <!-- 查询关键字类型 1-门店名称 2-门店电话 3-门店地址 4-绑定仓库名称 5-主管理姓名 6-主管理手机号 -->
            <el-select v-model="queryParams.searchKeyWordType" style="width: 120px;">
              <el-option label="门店名称" value="1"></el-option>
              <el-option label="门店电话" value="2"></el-option>
              <el-option label="门店地址" value="3"></el-option>
              <el-option label="绑定仓库名称" value="4"></el-option>
              <el-option label="主管理姓名" value="5"></el-option>
              <el-option label="主管理手机号" value="6"></el-option>
            </el-select>
            <el-input v-model="queryParams.searchKeyWord" placeholder="请输入搜索内容" clearable size="small"
              style="width: 240px" />
          </el-form-item>
          <el-form-item label="时间筛选:">
            <el-date-picker v-model="dateRange" size="small" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
              :default-time="['00:00:00', '23:59:59']" Ktype="datetimerange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-radio-group v-model="queryParams.statisticsDateType" @change="changeStatisticsDateType">
              <el-radio-button v-for="statisticsDateType in statisticsDateTypeList" :label="statisticsDateType.value"
                :key="statisticsDateType.value">{{statisticsDateType.label}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="pad-l-20 pad-r-20 bg-color-white">
        <!-- 排序规则  1-按综合业务合计交易额倒序 2-按配送到家业务合计交易额倒序 3-按到店自提业绩合计交易额倒序 4-按到社区团购绩合计交易额倒序 -->
        <el-tabs v-model="orderByType" @tab-click="changeOrderType">
          <el-tab-pane :label="totalCount" name="1"></el-tab-pane>
          <el-tab-pane :label="homeDeliveryNum" name="2"></el-tab-pane>
          <el-tab-pane :label="storeExtractionNum" name="3"></el-tab-pane>
          <el-tab-pane :label="communityGroupExtractionNum" name="4"></el-tab-pane>
        </el-tabs>
        <!-- 全选、操作 -->
        <div class="pad-t-15 pad-b-15 font-14 v-align-c">
          <el-checkbox class="mar-l-14 mar-r-0" v-model="allChecked" @change="selectAll"><span
              class="mar-l-20">当页全选</span></el-checkbox>
          <span class="pad-l-4 pad-r-4">|</span>
          <div class="width-80">已选{{multipleSelection.length}}项</div>
          <el-button @click="exportOrder">批量导出</el-button>
        </div>
        <div class="table-container">
          <el-table ref="multipleTable" :data="dataList" @selection-change="handleSelectionChange"
            v-loading="listLoading" element-loading-text="加载中" style="width: 100%;"
            header-cell-class-name="default-header" row-class-name="default-row">
            <el-table-column width="50px" type="selection"></el-table-column>
            <el-table-column width="100px" label="排行" prop="rank">
            </el-table-column>
            <el-table-column label="门店名称">
              <template slot-scope="scope">
                <div class="flex v-align-c cursor-p">
                  <div class="font-14 pad-l-10">
                    <div><span class="font-color-9"></span>{{scope.row.name}}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="合计订单数" prop="totalOrderNum">
            </el-table-column>
            <el-table-column label="合计交易额" prop="totalOrderPrice">
            </el-table-column>
            <el-table-column label="客单价" prop="perTicketSales">
              <template slot-scope="scope">
                {{scope.row.perTicketSales}}元/人
              </template>
            </el-table-column>
          </el-table>
          <pagination :total="total" :page.sync="queryParams.currentPage" :limit.sync="queryParams.size"
            @pagination="getList" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    statisticsStoreAchievement,
    statisticsStoreNum
  } from '@/api/user/memberStore'
  import {
    downloadFile
  } from '@/api/common/common'
  export default {
    created() {
      // 统计时间类型 1-昨天 2-今天 3-近七天
      this.setDateParams(2)
      this.getList()
      this.getStatisticsStoreNum()
    },
    data() {
      return {
        total: 0,
        allChecked: false,
        listLoading: false,
        dataList: [],
        multipleSelection: [],
        takeLocationTypeData: [],
        // 排序规则  1-按订单总金额倒序 2-按订单数倒序 3-按抽成倒序
        orderByType: '1',
        queryParams: {
          currentPage: 1,
          size: 10,
          searchKeyWordType: '1',
          // 统计时间类型 1-昨天 2-今天 3-近七天
          statisticsDateType: 2,
          orderByTypeList: '2, 3, 4'
        },
        totalCount: '综合（0）',
        homeDeliveryNum: '到家配送（0）',
        storeExtractionNum: '到店自提（0）',
        communityGroupExtractionNum: '社区团购（0）',
        dateRange: [],
        showSearch: true,
        statisticsDateTypeList: [{
          label: '今',
          value: 2
        }, {
          label: '昨',
          value: 1
        }, {
          label: '近七天',
          value: 3
        }]
      }
    },
    methods: {
      handleQuery() {
        this.reloadData()
      },
      resetQuery() {
        const originData = this.$options.data()
        if (this.$refs['queryForm']) {
          this.$refs['queryForm'].resetFields()
        }
        this.queryParams = originData.queryParams
        this.setDateParams(2)
        this.handleQuery()
      },
      getList() {
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
        if (this.dateRange && this.dateRange.length > 0) {
          this.queryParams.startTime = this.dateRange[0]
          this.queryParams.endTime = this.dateRange[1]
        }
        this.listLoading = true
        this.queryParams.enterpriseId = this.getEnterpriseId()
        this.queryParams.orderByType = this.orderByType
        statisticsStoreAchievement(this.queryParams).then(response => {
          this.listLoading = false
          if (response.isError) return
          this.total = response.data.total
          this.dataList = response.data.records
        })
      },
      getStatisticsStoreNum() {
        this.queryParams.enterpriseId = this.getEnterpriseId()
        this.queryParams.orderByTypeList = '3, 4, 5'
        statisticsStoreNum(this.queryParams).then(response => {
          this.listLoading = false
          if (response.isError) return
          this.totalCount = '综合（' + Math.floor(response.data.totalCount) + '）'
          this.homeDeliveryNum = '到家配送（' + Math.floor(response.data.homeDeliveryNum) + '）'
          this.storeExtractionNum = '到店自提（' + Math.floor(response.data.storeExtractionNum) + '）'
          this.communityGroupExtractionNum = '社区团购（' + Math.floor(response.data.communityGroupExtractionNum) + '）'
        })
      },
      changeStatisticsDateType(value) {
        this.setDateParams(value)
        this.reloadData()
      },
      // 统计时间类型 1-昨天 2-今天 3-近七天
      setDateParams(type) {
        switch (type) {
          case 1: {
            const lastDate = this.getStatisticsDate(-1)
            this.queryParams.startTime = lastDate + ' 00:00:00'
            this.queryParams.endTime = lastDate + ' 23:59:59'
            break
          }
          case 2: {
            const todayDate = this.getStatisticsDate(0)
            this.queryParams.startTime = todayDate + ' 00:00:00'
            this.queryParams.endTime = todayDate + ' 23:59:59'
            break
          }
          case 3: {
            const last7Date = this.getStatisticsDate(-7)
            this.queryParams.startTime = last7Date + ' 00:00:00'
            this.queryParams.endTime = this.getStatisticsDate(0) + ' 23:59:59'
            break
          }
        }
        this.dateRange = []
        this.dateRange.push(this.queryParams.startTime)
        this.dateRange.push(this.queryParams.endTime)
      },
      getStatisticsDate(days) {
        var dd = new Date()
        dd.setDate(dd.getDate() + days) // 获取days天后的日期
        var y = dd.getFullYear()
        var m = dd.getMonth() + 1 // 获取当前月份的日期
        if (m < 10) {
          m = '0' + m
        }
        var d = dd.getDate()
        if (d < 10) {
          d = '0' + d
        }
        return y + '-' + m + '-' + d
      },
      reloadData() {
        this.queryParams.currentPage = 1
        this.queryParams.size = 10
        this.getList()
      },
      changeOrderType(tab) {
        if (tab.name === '1') {
          this.queryParams.orderByTypeList = '3, 4, 5'
        } else if (tab.name === '2') {
          this.queryParams.orderByTypeList = '5'
        } else if (tab.name === '3') {
          this.queryParams.orderByTypeList = '4'
        } else if (tab.name === '4') {
          this.queryParams.orderByTypeList = '3'
        }
        this.reloadData()
      },
      selectAll() {
        if (this.multipleSelection.length === 0 || this.multipleSelection.length < this.dataList.length) {
          this.dataList.forEach(item => {
            this.$refs.multipleTable.toggleRowSelection(item, true)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
        if (this.multipleSelection.length === this.dataList.length) {
          this.allChecked = true
        } else {
          this.allChecked = false
        }
      },
      exportOrder() {
        if (this.multipleSelection.length > 0) {
          const memberIdList = this.multipleSelection.map(item => item.memberId)
          downloadFile('/user/memberStore/exportData', {
            enterpriseId: this.getEnterpriseId(),
            memberIdList: memberIdList.join(',')
          }, '门店业绩单.xlsx')
        } else {
          downloadFile('/user/memberStore/exportData', this.queryParams, '门店业绩单.xlsx')
        }
      }
    }
  }
</script>

<style>
  label {
    font-weight: 400 !important;
  }
</style>
<style lang="less" scoped>
  .user-avatar {
    width: 65px;
    height: 65px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
</style>
